<template>
    <transition name="fade">
        <div v-if="show" class="ui-message" :class="type">
            {{ text }}
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'message context'
        },
        type: {
            type: String,
            default: 'info'
        }
    },
    data() {
        return {
            show: false
        }
    },
    watch: {
        // 自动关闭
        show(val, oldVal) {
            if (val) {
                setTimeout(() => {
                    this.show = false
                }, 3000)
            }
        }
    }
}
</script>

<style scoped lang="less">
.ui-message {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 999;
    transform: translate(-50%, 0);
    padding: 0.1rem 0.15rem;
    width: 7.5rem;
    text-align: center;
    box-shadow: 0 1px 5px #ddd;
    background-color: white;
    color: #fff;
    &.success {
        background-color: #67c23a;
    }
    &.warning {
        background-color: #e6a23c;
    }
    &.error {
        background-color: #f56c6c;
    }
    &.info {
        background-color: #909399;
    }
}
.fade-enter {
    opacity: 0;
    transform: translate(-50%, -30px);
}
.fade-enter-active {
    transition: all 0.5s;
}
.fade-enter-to {
    opacity: 1;
    transform: translate(-50%, 0);
}
.fade-leave {
    opacity: 1;
    transform: translate(-50%, 0);
}
.fade-leave-active {
    transition: all 0.5s;
}
.fade-leave-to {
    opacity: 0;
    transform: translate(-50%, -30px);
}
</style>
